import React, {Component} from 'react';
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'
import './index.scss'
import {Icon, NavBar} from "antd-mobile";

const bg = require('../../assets/img/riskBg.png')
const step0 = require('../../assets/img/step/1.png')
const step1 = require('../../assets/img/step/2.png')
const step2 = require('../../assets/img/step/3.png')
const step3 = require('../../assets/img/step/4.png')
const step4 = require('../../assets/img/step/5.png')
const step5 = require('../../assets/img/step/6.png')
const step6 = require('../../assets/img/step/7.png')
const step7 = require('../../assets/img/step/8.png')
const step8 = require('../../assets/img/step/9.png')
const step9 = require('../../assets/img/step/10.png')

class riskComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [
                {
                    aq: '您目前所处的年龄段为',
                    ans: [
                        {
                            label: 'A: 55岁以上',
                            key: 'A',
                            active: false
                        },
                        {
                            label: 'B: 40-55岁',
                            key: 'B',
                            active: false

                        },
                        {
                            label: 'C: 30-40岁',
                            active: false,
                            key: 'C'
                        },
                        {
                            active: false,

                            label: 'D: 18-30岁',
                            key: 'D'
                        }
                    ]
                },
                {
                    aq: '您可以出借的资金量（可出借资金指出借后不会影响个人或家庭生活品质的资金）',
                    ans: [
                        {
                            active: false,
                            label: 'A: 10万（含）以下 ',
                            key: 'A'
                        },
                        {
                            active: false,
                            label: 'B: 10万至100万（含）',
                            key: 'B'
                        },
                        {
                            active: false,
                            label: 'C: 100万至500万（含）',
                            key: 'C'
                        },
                        {
                            active: false,
                            label: 'D: 00万以上',
                            key: 'D'
                        }
                    ]
                },
                {
                    aq: '您的投资目的是什么？',
                    ans: [
                        {
                            active: false,
                            label: 'A: 超过通货膨胀就好(每年3%-6%)',
                            key: 'A'
                        },
                        {
                            active: false,
                            label: 'B: 获取较稳定可观收益(每年6%-15%左右)',
                            key: 'B'
                        },
                        {
                            active: false,
                            label: 'C: 获取较高收益(每年15%-24%)',
                            key: 'C'
                        },
                        {
                            active: false,
                            label: 'D: 博取高收益(每年24%以上)',
                            key: 'D'
                        }
                    ]
                },
                {
                    aq: '您一般投资的期限为',
                    ans: [
                        {
                            active: false,
                            label: 'A: 1年以内',
                            key: 'A'
                        },
                        {
                            active: false,
                            label: 'B: 1-2年（包括1年）',
                            key: 'B'
                        },
                        {
                            active: false,
                            label: 'C: 2-5年（包括2年）',
                            key: 'C'
                        },
                        {
                            active: false,
                            label: 'D: 5年以上',
                            key: 'D'
                        }
                    ]
                },
                {
                    aq: '您投资时，能接受一年内的本金最大损失比率是多少？',
                    ans: [
                        {
                            active: false,
                            label: 'A: 10%以内',
                            key: 'A'
                        },
                        {
                            active: false,
                            label: 'B: 10%~20%间 ',
                            key: 'B'
                        },
                        {
                            active: false,
                            label: 'C: 20%~30%间',
                            key: 'C'
                        },
                        {
                            active: false,
                            label: 'D: 30%以上',
                            key: 'D'
                        }
                    ]
                },
                {
                    aq: '某组合/基金未来3年里平均收益、最好和最坏的收益情况如下,您会选择哪种？',
                    ans: [
                        {
                            active: false,
                            label: 'A: 平均年收益率为2%，最好情况3%，最坏情况1% ',
                            key: 'A'
                        },
                        {
                            active: false,
                            label: 'B: 平均年收益率为6%，最好情况13%，最坏情况-2% ',
                            key: 'B'
                        },
                        {
                            active: false,
                            label: 'C: 平均年收益率为8%，最好情况53%，最坏情况-35%',
                            key: 'C'
                        },
                        {
                            active: false,
                            label: 'D: 平均年收益率为10%，最好情况65%，最坏情况-45%',
                            key: 'D'
                        }
                    ]
                },
                {
                    aq: '您家庭的年收入？',
                    ans: [
                        {
                            active: false,
                            label: 'A: 10万元（含）以下',
                            key: 'A'
                        },
                        {
                            active: false,
                            label: 'B: 10万至20万（含）',
                            key: 'B'
                        },
                        {
                            active: false,
                            label: 'C: 20万至50万（含）',
                            key: 'C'
                        },
                        {
                            active: false,
                            label: 'D: 50万以上',
                            key: 'D'
                        }
                    ]
                },
                {
                    aq: '您预计家庭的年收入在未来5年中将',
                    ans: [
                        {
                            active: false,
                            label: 'A: 有所下降',
                            key: 'A'
                        },
                        {
                            active: false,
                            label: 'B: 维持稳定',
                            key: 'B'
                        },
                        {
                            active: false,
                            label: 'C: 小幅成长，在10%左右',
                            key: 'C'
                        },
                        {
                            active: false,
                            label: 'D: 大幅成长，在20%以上',
                            key: 'D'
                        }
                    ]
                },
                {
                    aq: '您家庭的月生活消费支出约占月总收入的',
                    ans: [
                        {
                            active: false,
                            label: 'A: 71%-100%以上',
                            key: 'A'
                        },
                        {
                            active: false,
                            label: 'B: 51%-70%',
                            key: 'B'
                        },
                        {
                            active: false,
                            label: 'C: 21%-50%',
                            key: 'C'
                        },
                        {
                            active: false,
                            label: 'D: 0-20%',
                            key: 'D'
                        }
                    ]
                },
                {
                    aq: '您曾投资过的风险最高的产品是',
                    ans: [
                        {
                            active: false,
                            label: 'A: 储蓄、银行理财产品、货币基金等风险极小的现金管理工具',
                            key: 'A'
                        },
                        {
                            active: false,
                            label: 'B: 债券或债券类基金、固定收益信托等',
                            key: 'B'
                        },
                        {
                            active: false,
                            label: 'C: 股票或股票型基金',
                            key: 'C'
                        },
                        {
                            active: false,
                            label: 'D: 期货或期货类基金、PE、房地产基金、艺术品基金等另类投资产品',
                            key: 'D'
                        }
                    ]
                },
            ]

        }
    }

    componentWillUnmount() {
        if (this.swiper) { // 销毁swiper
            this.swiper.destroy()
        }
    }

    componentDidMount() {
        this.swiper = new Swiper('.swiper-container', {
            direction: 'vertical',
            nextButton: '.swiper-button-next',
            autoplay: false,//可选选项，自动滑动
        })
    }

    select(allData, item, itemData, index) {
        let cloneData = JSON.parse(JSON.stringify(allData))
        let newData = item.ans.map(item => {
            item.active = false;
            return item
        });
        cloneData[index].ans = newData;
        itemData.active = true;
        this.swiper.slideTo(index + 1, 1000, false);
        this.setState({
            data: cloneData
        })
        console.log(index);
        if (index === 9) {
            console.log(cloneData);
        }
    }

    render() {
        const {data} = this.state
        const goBack = () => {
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            if (isAndroid) {
                android.back()
            } else {
                var message = {"method": "back"};
                window.webkit.messageHandlers.ios.postMessage(message);
            }
        }
        const step = (index) => {
            if (index === 0) {
                return step0
            } else if (index === 1) {
                return step1
            } else if (index === 2) {
                return step2
            } else if (index === 3) {
                return step3
            } else if (index === 4) {
                return step4
            } else if (index === 5) {
                return step5
            } else if (index === 6) {
                return step6
            } else if (index === 7) {
                return step7
            } else if (index === 8) {
                return step8
            } else if (index === 9) {
                return step9
            }
        }
        const prepage = (index) => {
            this.swiper.slideTo(index - 1, 1000, false);

        }
        return (
            <div>
                <div className="swiper-container swiper-no-swiping">
                    <NavBar mode="light"
                            onLeftClick={() => goBack()}
                            icon={<Icon type="left"/>}
                            className='title'>风险测评</NavBar>
                    {
                        data.map((item, index) => {
                            return <div className="swiper-wrapper">
                                <div className="swiper-slide">
                                    <div className={'swiper-bg'}>
                                        <div className={'bg-img-warp'}>
                                            <img className={'bg-img'} src={bg} alt=""/>
                                            <img className={'step'} src={step(index)} alt=""/>
                                            <p className={'item-title'}>{item.aq}</p>
                                            <div className={'select-warp'}>
                                                {
                                                    item.ans.map(itemData => (
                                                        <div onClick={() => this.select(data, item, itemData, index)}
                                                             className={itemData.active ? 'select-item-active' : 'select-item'}>
                                                            {itemData.label}
                                                        </div>
                                                    ))
                                                }
                                            </div>
                                            {
                                                index !== 0 ?
                                                    <div className={'preBtn'}
                                                         onClick={() => prepage(index)}>上一题</div> : ''
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                        })
                    }

                </div>
            </div>

        )
    }

}

export default riskComponent
